<template>
  <div class="HealthyDetails">
    <van-nav-bar title="我的健康币" left-arrow @click="onClickLeft" />
    <div class="HealthyDetailsHeaders">
      <div class="HealthyDetailsHeader">
        <img src="../../image/HealthyDetailsHeader.png" alt="" />
        <img
          class="turntable"
          src="../../image/a21.png"
          alt=""
          @click="goturntable"
        />
        <img
          class="scartchcard"
          src="../../image/a30.png"
          alt=""
          @click="goscratchcard"
        />
        <div class="moremoney"></div>
      </div>
      <h3 class="HealthyDetailsSuper">超级抵扣</h3>
      <div style="position: relative">
        <h2 class="HealthyDetailsTitle">问诊抵扣</h2>
        <p
          style="
            display: inline-block;
            position: absolute;
            bottom: 0;
            left: 1.2rem;
          "
        >
          最高抵扣<span class="HealthyDetailsTitleNum">20%</span>
        </p>
      </div>
      <div class="HealthyDetailsMain">
        <dl to="interrogation">
          <dt>
            <img src="../../image/HealthyDetailsFootImg1.png" alt="" />
          </dt>
          <dd>
            <h3>快速问诊</h3>
            <p>
              三甲专家/<span class="HealthyDetailsTitleNum">3分钟</span>接诊
            </p>
          </dd>
        </dl>
        <dl to="interrogation">
          <dt>
            <img src="../../image/HealthyDetailsFootImg2.png" alt="" />
          </dt>
          <dd>
            <h3>专家问诊</h3>
            <p><span class="HealthyDetailsTitleNum">32万</span>医生在线</p>
          </dd>
        </dl>
        <dl to="">
          <dt>
            <img src="../../image/HealthyDetailsFootImg3.png" alt="" />
          </dt>
          <dd>
            <h3>一病多问</h3>
            <p>一次看<span class="HealthyDetailsTitleNum">5位</span>专家</p>
          </dd>
        </dl>
      </div>
      <div class="HealthyDetailsFroot">
        <img
          src="https://kano.guahao.cn/CQI531166825?token=OTRkZDRiYzlmNGIyZjUzMTFhY2I3ODVkMWM4N2ZiYmVfTUQ1COUSTOM&amp;v=1.0%22%20class=%22LazyImg-img%20LazyImg-lazy%20__lazy__%20LazyImg-loaded%22%20src=%22//kano.guahao.cn/CQI531166825?token=OTRkZDRiYzlmNGIyZjUzMTFhY2I3ODVkMWM4N2ZiYmVfTUQ1COUSTOM&amp;v=1.0"
          alt=""
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
const onClickLeft = () => {
  router.push("/home/my");
};
// 跳转到转盘页面
const goturntable = () => {
  router.push("/turntable");
};
// 跳转到刮刮乐页面
const goscratchcard = () => {
  router.push("/scratchcard");
};
</script>
<style scoped>
.HealthyDetails {
  background-color: #ccc;
}

.HealthyDetailsHeaders {
  width: 100%;
  background-color: #fff;
}

.HealthyDetailsHeader {
  width: 100%;
  height: 2.5rem;
  position: relative;
}

.HealthyDetailsHeader img {
  width: 100%;
  height: 100%;
}
.HealthyDetailsHeader .turntable {
  width: 0.55rem;
  height: 0.5rem;
  position: absolute;
  top: 1.79rem;
  left: 0.2rem;
}
.HealthyDetailsHeader .scartchcard {
  width: 0.58rem;
  height: 0.5rem;
  position: absolute;
  top: 1.14rem;
  left: 0.18rem;
}

.HealthyDetailsSuper {
  margin-block-start: 0.2rem;
  margin-block-end: 0.2rem;
  margin-left: 0.3rem;
}

.HealthyDetailsTitle {
  margin-block-start: 0.2rem;
  margin-block-end: 0.2rem;
  margin-left: 0.2rem;
}

.HealthyDetailsMain {
  width: 100%;
  display: flex;
}

.HealthyDetailsMain dl {
  flex: 1;
  height: 1.3rem;
  text-align: center;
}

.HealthyDetailsMain dd p {
  font-size: 0.12rem;
}

.HealthyDetailsFroot {
  width: 100%;
  height: 1rem;
}

.HealthyDetailsFroot img {
  width: 100%;
  height: 100%;
}

.HealthyDetailsTitleNum {
  color: #fc582c;
}

.moremoney {
  background: url(https://kano.guahao.com/ewt600048338?token=MTMxYjBhMzhhMzdlZWFmMTIwZTU3ZTAwM2NlM2Y1NzlfTUQ1COUSTOM&v=1.0)
    center no-repeat;
  background-size: cover;
  position: absolute;
  width: 0.75rem;
  height: 0.8rem;
  bottom: 0.11rem;
  right: 0.07rem;
}
</style>